<!-- 社保基数编辑 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">最低缴纳基数的缴纳费用</p>

    <div class="xcxcvretyd">
      <div>
        <n-input
          v-model:value="fromData.title"
          type="text"
          placeholder="请输入标题"
        />
      </div>
      <n-data-table
        class="mt20"
        :single-line="false"
        :data="data"
        :columns="columns"
      />

      <div class="mt40">
        <p class="title-label mb10">社保合计</p>

        <div class="z3">
          企业缴纳：<span class="red">{{ kmxczxf() }}</span>
        </div>
        <div class="z3">
          个人缴纳：<span class="red">{{ grkmxczxf() }}</span>
        </div>
        <div class="z3">
          合计：<span class="red">{{ jxcxdftr(kmxczxf() + grkmxczxf()) }}</span>
        </div>
      </div>

      <div class="mt20 cen">
        <n-button type="primary" @click="baocun"> 保存 </n-button>
        <n-button type="error" class="ml20" @click="callBack">
          返回上一页
        </n-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, h } from "vue";
import { NInput, formDark } from "naive-ui";
import { dxpost, callBack, dxget, qurl } from "../../util/index";
const cz = qurl();
const fromData = ref({
  title: "",
  year: new Date().getFullYear(),
  jsonData: "",
  qyjn: "",
  grjn: "",
  heji: "",
});
const columns = ref([
  {
    title: "险种",
    key: "fdsfd1",
    align: "center",
    render(row, index) {
      return h(NInput, {
        value: row.fdsfd1,
        onUpdateValue(v) {
          data.value[index].fdsfd1 = v;
        },
      });
    },
  },
  {
    title: "缴费基数",
    key: "fdsfd2",
    align: "center",
    render(row, index) {
      return h(NInput, {
        value: row.fdsfd2,
        onUpdateValue(v) {
          data.value[index].fdsfd2 = v;
        },
      });
    },
  },
  {
    title: "企业缴纳",
    align: "center",
    children: [
      {
        title: "缴费比例",
        key: "fdsfd3",
        align: "center",
        render(row, index) {
          return h(NInput, {
            value: row.fdsfd3,
            onUpdateValue(v) {
              data.value[index].fdsfd3 = v;
            },
          });
        },
      },
      {
        title: "缴费金额",
        key: "fdsfd4",
        align: "center",
        render(row, index) {
          return h(NInput, {
            value: row.fdsfd4,
            onUpdateValue(v) {
              data.value[index].fdsfd4 = v;
            },
          });
        },
      },
    ],
  },
  {
    title: "个人缴纳",
    align: "center",
    children: [
      {
        title: "缴费比例",
        key: "fdsfd5",
        align: "center",
        render(row, index) {
          return h(NInput, {
            value: row.fdsfd5,
            onUpdateValue(v) {
              data.value[index].fdsfd5 = v;
            },
          });
        },
      },
      {
        title: "缴费金额",
        key: "fdsfd6",
        align: "center",
        render(row, index) {
          return h(NInput, {
            value: row.fdsfd6,
            onUpdateValue(v) {
              data.value[index].fdsfd6 = v;
            },
          });
        },
      },
    ],
  },
  {
    title: "小计",
    key: "name",
    align: "center",
    width: "150",
    render(row, index) {
      try {
        return (parseFloat(row.fdsfd4) + parseFloat(row.fdsfd6)).toFixed(2);
      } catch (e) {
        return "-";
      }
    },
  },
]);
const data = ref([
  {
    fdsfd1: "养老保险",
    fdsfd2: "3300",
    fdsfd3: "16.00%",
    fdsfd4: "528.00",
    fdsfd5: "8.00%",
    fdsfd6: "264.00",
  },
  {
    fdsfd1: "医疗保险",
    fdsfd2: "4212",
    fdsfd3: "6.5%",
    fdsfd4: "273.78",
    fdsfd5: "2.00%",
    fdsfd6: "84.24",
  },
  {
    fdsfd1: "失业保险",
    fdsfd2: "3300",
    fdsfd3: "0.50%",
    fdsfd4: "16.50",
    fdsfd5: "0.50%",
    fdsfd6: "16.50",
  },
  {
    fdsfd1: "工伤保险",
    fdsfd2: "4212",
    fdsfd3: "0.40%",
    fdsfd4: "16.85",
    fdsfd5: "0.00%",
    fdsfd6: "0.00",
  },
  {
    fdsfd1: "残保金",
    fdsfd2: "9268.17",
    fdsfd3: "0.58%",
    fdsfd4: "53.76",
    fdsfd5: "0.00%",
    fdsfd6: "0.00",
  },
  {
    fdsfd1: "生育保险",
    fdsfd2: "4212",
    fdsfd3: "0.70%",
    fdsfd4: "29.48",
    fdsfd5: "0.00%",
    fdsfd6: "0.00",
  },
]);
const kmxczxf = () => {
  let jxcxzd = 0;
  data.value.map((a) => {
    jxcxzd += parseFloat(a.fdsfd4);
  });
  return parseFloat(jxcxzd.toFixed(2));
};
const grkmxczxf = () => {
  let jxcxzd = 0;
  data.value.map((a) => {
    jxcxzd += parseFloat(a.fdsfd6);
  });
  return parseFloat(jxcxzd.toFixed(2));
};
const jxcxdftr = (data) => {
  return data.toFixed(2);
};

const initData = async () => {
  const ret = await dxget("jiacaihui/sbzc", { id: cz.id });
  fromData.value = ret.data;
  data.value = JSON.parse(ret.data.jsonData);
};
if (cz.id) {
  initData();
}

// 保存按钮触发
const baocun = async () => {
  if (!fromData.value.title) {
    window.$message.error("请输入社保城市名称");
    return;
  }
  fromData.value.jsonData = JSON.stringify(data.value);
  fromData.value.qyjn = kmxczxf();
  fromData.value.grjn = grkmxczxf();
  fromData.value.heji = jxcxdftr(kmxczxf() + grkmxczxf());
  await dxpost("jiacaihui/sbzc", fromData.value, cz.id ? "put" : "post");
  window.$message.success("操作成功！");
  callBack();
};
</script>
<style scoped>
.xcxcvretyd {
  width: 1200px;
}
</style>
